/**
 * 应用主题样式
 * 
 * 定义亮色和暗色主题的CSS变量
 */

/* 根元素默认主题 */
:root {
  /* 默认主色调 - 蓝色 */
  --primary-color: #007bff;
  --primary-hover: #0056b3;
  --primary-light: #e3f2fd;
  --primary-bg: rgba(0, 123, 255, 0.1);
  
  /* 成功色 */
  --success-color: #28a745;
  --success-hover: #1e7e34;
  --success-light: #d4edda;
  
  /* 警告色 */
  --warning-color: #ffc107;
  --warning-hover: #e0a800;
  --warning-light: #fff3cd;
  
  /* 错误色 */
  --error-color: #dc3545;
  --error-hover: #c82333;
  --error-light: #f8d7da;
  
  /* 信息色 */
  --info-color: #17a2b8;
  --info-hover: #138496;
  --info-light: #d1ecf1;
}

/* 亮色主题 */
.theme-light {
  /* 背景色 */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-hover: #f5f5f5;
  
  /* 文字色 */
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --text-inverse: #ffffff;
  
  /* 边框色 */
  --border-color: #dee2e6;
  --border-hover: #adb5bd;
  --border-focus: #80bdff;
  
  /* 阴影 */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  /* 输入框 */
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-focus-border: #80bdff;
  --input-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  
  /* 按钮 */
  --btn-bg: #ffffff;
  --btn-border: #dee2e6;
  --btn-hover-bg: #e2e6ea;
  
  /* 卡片 */
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  
  /* 导航 */
  --nav-bg: #ffffff;
  --nav-border: #dee2e6;
  --nav-link-color: #495057;
  --nav-link-hover: var(--primary-color, #007bff);
}

/* 暗色主题 */
.theme-dark {
  /* 背景色 */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d3748;
  --bg-tertiary: #4a5568;
  --bg-hover: #374151;
  
  /* 文字色 */
  --text-primary: #f7fafc;
  --text-secondary: #cbd5e0;
  --text-muted: #a0aec0;
  --text-inverse: #1a202c;
  
  /* 边框色 */
  --border-color: #4a5568;
  --border-hover: #718096;
  --border-focus: #63b3ed;
  
  /* 阴影 */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  
  /* 输入框 */
  --input-bg: #2d3748;
  --input-border: #4a5568;
  --input-focus-border: #63b3ed;
  --input-focus-shadow: 0 0 0 0.2rem rgba(99, 179, 237, 0.25);
  
  /* 按钮 */
  --btn-bg: #2d3748;
  --btn-border: #4a5568;
  --btn-hover-bg: #374151;
  
  /* 卡片 */
  --card-bg: #2d3748;
  --card-border: #4a5568;
  
  /* 导航 */
  --nav-bg: #1a202c;
  --nav-border: #2d3748;
  --nav-link-color: #cbd5e0;
  --nav-link-hover: var(--primary-color, #63b3ed);
  
  /* 暗色模式下重写状态颜色的light变量 */
  --success-light: rgba(34, 197, 94, 0.15);
  --warning-light: rgba(251, 191, 36, 0.15);
  --error-light: rgba(239, 68, 68, 0.15);
  --info-light: rgba(59, 130, 246, 0.15);
}

/* 全局主题应用 */
body {
  background-color: var(--bg-primary) !important;
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 覆盖base.css中的变量 */
:root {
  --color-background: var(--bg-primary);
  --color-background-soft: var(--bg-secondary);  
  --color-background-mute: var(--bg-tertiary);
  --color-text: var(--text-primary);
}

/* 输入框主题 */
input, textarea, select {
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}

/* 按钮主题 */
.btn {
  background-color: var(--btn-bg);
  color: var(--text-primary);
  border: 1px solid var(--btn-border);
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: var(--btn-hover-bg);
}

/* 卡片主题 */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
}

/* 导航主题 */
.nav {
  background-color: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

.nav-link {
  color: var(--nav-link-color);
}

.nav-link:hover {
  color: var(--nav-link-hover);
}

/* 滚动条主题 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* 选中文本主题 */
::selection {
  background-color: var(--primary-light);
  color: var(--text-primary);
}

/* 暗黑模式下的选中文本 */
.theme-dark ::selection {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}

/* 主题切换动画 */
* {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease, 
              box-shadow 0.3s ease;
}

/* 颜色主题定义 */

/* 蓝色主题 - 默认 */
.color-blue {
  --primary-color: #007bff;
  --primary-hover: #0056b3;
  --primary-light: #e3f2fd;
  --primary-bg: rgba(0, 123, 255, 0.1);
  --nav-accent: rgba(0, 123, 255, 0.15);
}

/* 绿色主题 */
.color-green {
  --primary-color: #28a745;
  --primary-hover: #1e7e34;
  --primary-light: #e8f5e8;
  --primary-bg: rgba(40, 167, 69, 0.1);
  --nav-accent: rgba(40, 167, 69, 0.15);
}

/* 紫色主题 */
.color-purple {
  --primary-color: #6f42c1;
  --primary-hover: #5a32a3;
  --primary-light: #f3e8ff;
  --primary-bg: rgba(111, 66, 193, 0.1);
  --nav-accent: rgba(111, 66, 193, 0.15);
}

/* 橙色主题 */
.color-orange {
  --primary-color: #fd7e14;
  --primary-hover: #e8650e;
  --primary-light: #fff4e6;
  --primary-bg: rgba(253, 126, 20, 0.1);
  --nav-accent: rgba(253, 126, 20, 0.15);
}

/* 红色主题 */
.color-red {
  --primary-color: #dc3545;
  --primary-hover: #c82333;
  --primary-light: #fdeaea;
  --primary-bg: rgba(220, 53, 69, 0.1);
  --nav-accent: rgba(220, 53, 69, 0.15);
}

/* 青色主题 */
.color-teal {
  --primary-color: #20c997;
  --primary-hover: #1ba085;
  --primary-light: #e6fffa;
  --primary-bg: rgba(32, 201, 151, 0.1);
  --nav-accent: rgba(32, 201, 151, 0.15);
}

/* 粉色主题 */
.color-pink {
  --primary-color: #e83e8c;
  --primary-hover: #d91a72;
  --primary-light: #fdf2f8;
  --primary-bg: rgba(232, 62, 140, 0.1);
  --nav-accent: rgba(232, 62, 140, 0.15);
}

/* 靛蓝色主题 */
.color-indigo {
  --primary-color: #6610f2;
  --primary-hover: #520dc2;
  --primary-light: #f0e6ff;
  --primary-bg: rgba(102, 16, 242, 0.1);
  --nav-accent: rgba(102, 16, 242, 0.15);
}

/* 暗色模式下的颜色主题适配 */
.theme-dark.color-blue {
  --primary-light: rgba(59, 130, 246, 0.15);
  --primary-bg: rgba(59, 130, 246, 0.1);
}

.theme-dark.color-green {
  --primary-light: rgba(34, 197, 94, 0.15);
  --primary-bg: rgba(34, 197, 94, 0.1);
}

.theme-dark.color-purple {
  --primary-light: rgba(147, 51, 234, 0.15);
  --primary-bg: rgba(147, 51, 234, 0.1);
}

.theme-dark.color-orange {
  --primary-light: rgba(251, 146, 60, 0.15);
  --primary-bg: rgba(251, 146, 60, 0.1);
}

.theme-dark.color-red {
  --primary-light: rgba(239, 68, 68, 0.15);
  --primary-bg: rgba(239, 68, 68, 0.1);
}

.theme-dark.color-teal {
  --primary-light: rgba(20, 184, 166, 0.15);
  --primary-bg: rgba(20, 184, 166, 0.1);
}

.theme-dark.color-pink {
  --primary-light: rgba(236, 72, 153, 0.15);
  --primary-bg: rgba(236, 72, 153, 0.1);
}

.theme-dark.color-indigo {
  --primary-light: rgba(99, 102, 241, 0.15);
  --primary-bg: rgba(99, 102, 241, 0.1);
}

/* 暗黑模式下的额外调整 */
.theme-dark {
  /* 确保足够的对比度 */
  --bg-hover: #374151;
  --btn-hover-bg: #374151;
}

.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
  background-color: var(--input-bg);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* 响应式主题 */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark) {
    /* 自动模式下跟随系统主题 */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    --bg-hover: #374151;
    --text-primary: #f7fafc;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --text-inverse: #1a202c;
    --border-color: #4a5568;
    --border-hover: #718096;
    --border-focus: #63b3ed;
    --input-bg: #2d3748;
    --input-border: #4a5568;
    --input-focus-border: #63b3ed;
    --btn-bg: #2d3748;
    --btn-border: #4a5568;
    --btn-hover-bg: #374151;
    --card-bg: #2d3748;
    --card-border: #4a5568;
    --nav-bg: #1a202c;
    --nav-border: #2d3748;
    --nav-link-color: #cbd5e0;
    --nav-link-hover: #63b3ed;
    --success-light: rgba(34, 197, 94, 0.15);
    --warning-light: rgba(251, 191, 36, 0.15);
    --error-light: rgba(239, 68, 68, 0.15);
    --info-light: rgba(59, 130, 246, 0.15);
  }
}
